<template>
  <div ref="lineChartObj" style="width: 700px; height: 500px"></div>
</template>

<script setup>
import { onMounted, ref } from 'vue'
import * as echarts from 'echarts' // 将echarts库中所有的对象引入进来，别名为echarts
let pieChartObj = ref(null)
const pieOptions = ref({
  title: {
    text: '服务类型占比',
    textStyle: { fontSize: 15 },
  },
  legend: {
    top: 'bottom',
  },
  toolbox: {
    show: true,
    feature: {
      dataView: { show: true, readOnly: false },
      restore: { show: true },
    },
  },
  series: [
    {
      name: 'Nightingale Chart',
      type: 'pie',
      radius: [50, 150],
      center: ['50%', '50%'],
      roseType: 'area',
      itemStyle: {
        borderRadius: 3,
      },
      data: [
        { value: 40, name: 'HTTP' },
        { value: 38, name: 'TCP' },
        { value: 32, name: 'GRPC' },
      ],
    },
  ],
})
// onMounted() 加载的 内容 ， 包括 变量、函数
// () => {} 是个钩子
onMounted(() => {
  // 基于准备好的dom (这里是div chart容器)，初始化echarts实例
  const pieChart = echarts.init(pieChartObj.value)
  // 使用刚指定的配置项和数据显示图表。
  pieChart.setOption(pieOptions.value)
  // 图表根据窗口大小 自适应 完整显示
  window.addEventListener('resize', () => {
    pieChart.resize()
  })
})
</script>
